<template>
  <scroll-view
    class="container"
    scroll-y
    :show-scrollbar="false"
    enhanced
    @scrolltolower="pullUpLoad"
  >
    <navigator
      class="course-item"
      v-for="course in courseList"
      :key="course.id"
      :url="`/pages/course/detail/index?id=${course.id}`"
    >
      <img :src="course.cover" :alt="course.title" class="course-img" />
      <div class="course-wrap">
        <div class="course-title els">{{ course.title }}</div>
        <div>
          <span class="course-price">￥{{ course.price }}</span>
          <span class="course-buyCount">{{ course.buyCount }}人购买</span>
        </div>
      </div>
    </navigator>

    <uni-load-more :status="status" />
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getCourseListApi } from "../../../api/course";
import type { ICourseList } from "../../../api/types";

const page = ref(1);
const limit = ref(10);
const totalPages = ref(0);
const courseList = ref<ICourseList>([]);
const status = ref("more");

const getCourseList = async () => {
  status.value = "loading";
  const res = await getCourseListApi(page.value, limit.value);
  totalPages.value = res.pages;
  courseList.value = [...courseList.value, ...res.items];
  status.value = "more";
};

onLoad(getCourseList);

const pullUpLoad = () => {
  if (page.value === totalPages.value) {
    status.value = "no-more";
    return;
  }
  page.value++;
  getCourseList();
};
</script>

<style scoped lang="scss">
.container {
  background-color: #eee;
}
.course-item {
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  display: flex;
}

.course-img {
  width: 250rpx;
  height: 150rpx;
}

.course-wrap {
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 14px;
  width: 440rpx;
}

.course-price {
  color: red;
  font-size: 16px;
}

.course-buyCount {
  font-size: 12px;
  margin-left: 20rpx;
  color: #666;
}
</style>
